<template>
	<view>
		<view class="h-footer" :class="fixed?'h-footer-fixed':''">
			<view class="h-footer-main">
				<u-button v-for="(item,i) in footerBtns" :key="i" @click="btnClick(item,i)"
					:type="item.type || 'primary'" :loading="loading&&activeIndex===i"
					:disabled="loading&&activeIndex!==i" :custom-style="item.style" :size="item.size|| 'medium'">
					{{item.text}}
				</u-button>
			</view>
			<iphoneBottomSafeArea v-if="fixed" />
		</view>
		<template v-if="fixed">
			<view class="h-footer-placeholder"></view>
			<iphoneBottomSafeArea />
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			fixed: {
				type: Boolean,
				default: true,
			},
			btns: {
				type: Array,
				default: () => []
			},
			customStyle: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
			return {
				btnStyle: {
					marginLeft: '10rpx',
					padding: '0 40rpx',
				},
				loading: false,
				activeIndex: ''
			};
		},
		computed: {
			footerBtns() {
				return this.btns.map((item, i) => {
					item.style = {
						...this.btnStyle,
						...this.customStyle,
						...(item.style || {})
					}

					if (i === 0) item.style.marginLeft = '0'
					return item
				})
			}
		},
		methods: {
			btnClick(item, i) {
				this.loading = true
				this.activeIndex = i;
				this.$emit('btnClick', this.$u.deepClone(item), i, () => {
					this.loading = false
					this.activeIndex = '';
				})
			}
		}
	}
</script>

<style lang="scss">
	.h-footer {
		width: 100%;

		&.h-footer-fixed {
			position: fixed;
			bottom: 0;
			z-index: 100;
			border-top: 1rpx solid #e4e7ed;
			background-color: #fff;
		}

		.h-footer-main {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.h-footer-main,
	.h-footer-placeholder {
		width: 100%;
		height: 100rpx;
	}
</style>
